<template>
  <div class="salary-container">
    <el-card class="salary-card">
      <template #header>
        <div class="card-header">
          <span>员工薪资记录</span>
          <el-button type="primary" @click="handleAdd">新增薪资记录</el-button>
        </div>
      </template>

      <el-form :model="queryForm" :inline="true" @submit.prevent="handleQuery">
        <el-form-item label="员工姓名">
          <el-input v-model="queryForm.name" placeholder="请输入员工姓名" clearable />
        </el-form-item>
        <el-form-item label="发放月份">
          <el-date-picker
            v-model="queryForm.salary_month"
            type="month"
            placeholder="请选择发放月份"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="salaryList" border stripe v-loading="loading">
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="employee_name" label="员工姓名" width="120" />
        <el-table-column prop="department" label="部门" width="150" />
        <el-table-column prop="position" label="职位" width="150" />
        <el-table-column prop="salary_month" label="发放月份" width="100" />
        <el-table-column prop="base_salary" label="基本工资" width="100" />
        <el-table-column prop="performance_salary" label="绩效工资" width="100" />
        <el-table-column prop="bonus" label="奖金" width="100" />
        <el-table-column prop="deduction" label="扣款" width="100" />
        <el-table-column prop="total_salary" label="实发工资" width="100" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag v-if="row.status === '1'">已发放</el-tag>
            <el-tag type="warning" v-else-if="row.status === '2'">待发放</el-tag>
            <el-tag type="info" v-else>已取消</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
            <el-button type="primary" link @click="handleView(row)">查看</el-button>
            <el-button type="danger" link @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        v-model:current-page="queryForm.page"
        v-model:page-size="queryForm.limit"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>

    <!-- 新增/编辑对话框 -->
    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="600px">
      <el-form :model="form" :rules="rules" ref="formRef" label-width="120px">
        <el-form-item label="员工姓名" prop="employee_id">
          <el-select v-model="form.employee_id" placeholder="请选择员工" style="width: 100%">
            <el-option
              v-for="employee in employeeOptions"
              :key="employee.id"
              :label="employee.name"
              :value="employee.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="发放月份" prop="salary_month">
          <el-date-picker
            v-model="form.salary_month"
            type="month"
            placeholder="请选择发放月份"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="基本工资" prop="base_salary">
          <el-input-number
            v-model="form.base_salary"
            :min="0"
            placeholder="请输入基本工资"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="绩效工资" prop="performance_salary">
          <el-input-number
            v-model="form.performance_salary"
            :min="0"
            placeholder="请输入绩效工资"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="奖金" prop="bonus">
          <el-input-number
            v-model="form.bonus"
            :min="0"
            placeholder="请输入奖金"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="扣款" prop="deduction">
          <el-input-number
            v-model="form.deduction"
            :min="0"
            placeholder="请输入扣款"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="form.status" placeholder="请选择状态" style="width: 100%">
            <el-option label="已发放" value="1" />
            <el-option label="待发放" value="2" />
            <el-option label="已取消" value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, onMounted, computed } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'

  // 定义薪资记录类型
  interface SalaryRecord {
    id: number
    employee_name: string
    department: string
    position: string
    salary_month: string
    base_salary: number
    performance_salary: number
    bonus: number
    deduction: number
    total_salary: number
    status: string
  }

  // 数据列表
  const salaryList = ref<SalaryRecord[]>([])
  const loading = ref(false)
  const total = ref(0)

  // 员工选项
  const employeeOptions = ref([
    { id: 1, name: '张三' },
    { id: 2, name: '李四' },
    { id: 3, name: '王五' },
  ])

  // 查询表单
  const queryForm = reactive({
    page: 1,
    limit: 10,
    name: '',
    salary_month: '',
  })

  // 对话框
  const dialogVisible = ref(false)
  const dialogTitle = ref('')
  const isEdit = ref(false)

  // 表单数据
  const form = reactive({
    id: 0,
    employee_id: '',
    salary_month: '',
    base_salary: 0,
    performance_salary: 0,
    bonus: 0,
    deduction: 0,
    status: '2',
    remark: '',
  })

  // 计算实发工资
  const totalSalary = computed(() => {
    return form.base_salary + form.performance_salary + form.bonus - form.deduction
  })

  // 表单验证规则
  const rules = {
    employee_id: [{ required: true, message: '请选择员工', trigger: 'change' }],
    salary_month: [{ required: true, message: '请选择发放月份', trigger: 'change' }],
    base_salary: [{ required: true, message: '请输入基本工资', trigger: 'blur' }],
  }

  // 表单引用
  const formRef = ref()

  // 获取数据列表
  const getSalaryList = async () => {
    loading.value = true
    try {
      // 模拟API调用
      // const res = await api.getSalaryList(queryForm)
      // salaryList.value = res.data.list
      // total.value = res.data.total

      // 模拟数据
      salaryList.value = [
        {
          id: 1,
          employee_name: '张三',
          department: '技术部',
          position: '前端工程师',
          salary_month: '2023-01',
          base_salary: 8000,
          performance_salary: 2000,
          bonus: 1000,
          deduction: 500,
          total_salary: 10500,
          status: '1',
        },
        {
          id: 2,
          employee_name: '李四',
          department: '销售部',
          position: '销售经理',
          salary_month: '2023-01',
          base_salary: 6000,
          performance_salary: 3000,
          bonus: 2000,
          deduction: 0,
          total_salary: 11000,
          status: '2',
        },
      ]
      total.value = 2
    } catch (error) {
      ElMessage.error('获取薪资记录列表失败')
    } finally {
      loading.value = false
    }
  }

  // 查询
  const handleQuery = () => {
    queryForm.page = 1
    getSalaryList()
  }

  // 重置
  const handleReset = () => {
    queryForm.name = ''
    queryForm.salary_month = ''
    queryForm.page = 1
    getSalaryList()
  }

  // 分页
  const handleSizeChange = (val: number) => {
    queryForm.limit = val
    getSalaryList()
  }

  const handleCurrentChange = (val: number) => {
    queryForm.page = val
    getSalaryList()
  }

  // 新增
  const handleAdd = () => {
    dialogTitle.value = '新增薪资记录'
    isEdit.value = false
    Object.assign(form, {
      id: 0,
      employee_id: '',
      salary_month: '',
      base_salary: 0,
      performance_salary: 0,
      bonus: 0,
      deduction: 0,
      status: '2',
      remark: '',
    })
    dialogVisible.value = true
  }

  // 编辑
  const handleEdit = (row: any) => {
    dialogTitle.value = '编辑薪资记录'
    isEdit.value = true
    Object.assign(form, row)
    dialogVisible.value = true
  }

  // 查看
  const handleView = (row: any) => {
    ElMessage.info('查看薪资记录详情')
    // 实现查看详情逻辑
  }

  // 删除
  const handleDelete = (row: any) => {
    ElMessageBox.confirm('确定要删除该薪资记录吗？', '提示', {
      type: 'warning',
    })
      .then(async () => {
        try {
          // await api.deleteSalary(row.id)
          ElMessage.success('删除成功')
          getSalaryList()
        } catch (error) {
          ElMessage.error('删除失败')
        }
      })
      .catch(() => {})
  }

  // 提交表单
  const handleSubmit = () => {
    formRef.value.validate(async (valid: boolean) => {
      if (valid) {
        try {
          if (isEdit.value) {
            // await api.updateSalary(form)
          } else {
            // await api.addSalary(form)
          }
          ElMessage.success(isEdit.value ? '编辑成功' : '新增成功')
          dialogVisible.value = false
          getSalaryList()
        } catch (error) {
          ElMessage.error(isEdit.value ? '编辑失败' : '新增失败')
        }
      }
    })
  }

  // 初始化
  onMounted(() => {
    getSalaryList()
  })
</script>

<style scoped>
  .salary-container {
    padding: 20px;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .salary-card {
    margin-bottom: 20px;
  }
</style>
